<template>
    <div class="leetcode-container">
      <div class="background-box">
        <div class="content-wrapper">
          <div class="header-section">
            <div class="logo">
              <img src="@/assets/images/力扣.png">
            </div>
            <div>
              <h1>java入门题</h1>
            </div>
          </div>

          <div class="tags-section section-box">
            <!-- <h3>显示标签</h3> -->
            
            <div class="tag-table">
              <div class="tag-row">
                <div class="tag-name">哈希</div>
                <div class="problems">
                  <div v-for="problem in hashProblems" :key="problem.id" class="problem">
                    <span class="problem-id">{{ problem.id }}</span>
                    <span class="problem-title">{{ problem.title }}</span>
                    <span class="problem-difficulty" :class="problem.difficulty">{{ problem.difficulty }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div class="divider"></div>
  
          <div class="two-pointers-section section-box">
            <h3>双指针</h3>
            <ul>
              <li v-for="problem in twoPointersProblems" :key="problem.title" class="problem">
                <span class="problem-title">{{ problem.title }}</span>
                <span class="problem-difficulty" :class="problem.difficulty">{{ problem.difficulty }}</span>
              </li>
            </ul>
          </div>
  
          <div class="divider"></div>
  
          <div class="sliding-window-section section-box">
            <h3>滑动窗口</h3>
            <ul>
              <li v-for="problem in slidingWindowProblems" :key="problem.title" class="problem">
                <span class="problem-title">{{ problem.title }}</span>
                <span class="problem-difficulty" :class="problem.difficulty">{{ problem.difficulty }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  
  interface Problem {
    id?: string;
    title: string;
    difficulty: '简单' | '中等' | '困难';
  }
  
  export default defineComponent({
    name: 'LeetCodeHot',
    setup() {
      const hashProblems: Problem[] = [
        { id: '①', title: '两数之和', difficulty: '简单' },
        { id: '②', title: '字母异位词分组', difficulty: '中等' },
        { id: '③', title: '最长连续序列', difficulty: '中等' }
      ];
  
      const twoPointersProblems: Problem[] = [
        { title: '移动零', difficulty: '简单' },
        { title: '盛最多水的容器', difficulty: '中等' },
        { title: '三数之和', difficulty: '中等' },
        { title: '接雨水', difficulty: '困难' }
      ];
  
      const slidingWindowProblems: Problem[] = [
        { title: '无重复字符的最长子串', difficulty: '中等' },
        { title: '找到字符串中所有字母异位词', difficulty: '中等' }
      ];
  
      return {
        hashProblems,
        twoPointersProblems,
        slidingWindowProblems
      };
    }
  });
  </script>
  
  <style scoped>
  .leetcode-container {
    width: var(--width);
    height: 100%;
    padding: 20px 0px;
    display: flex;
    justify-content: center;
  }
  
  .background-box {
    width: 70%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    border: 1px solid #e1e4e8;
    overflow-y: auto;
  }
  
  .content-wrapper {
    width: 100%;
    background-color: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .header-section{
    display: flex;
    align-items: center;
    justify-content: space-evenly;;
  }
  
  .logo {
    /* width: 50px; */
    /* margin-left: 20px; */
  }

  .logo img {
    width: 150px;
  }
  h1 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    border-bottom: 2px solid #f0f2f5;
    padding-bottom: 1rem;
  }
  
  .section-box {
    background-color: #f9fafc;
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    border: 1px solid #eaecef;
  }
  
  h2, h3 {
    color: #34495e;
    margin-bottom: 1rem;
  }
  
  .divider {
    height: 1px;
    background-color: #eaecef;
    margin: 1.5rem 0;
  }
  
  .tag-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
  
  .tag-row {
    display: table-row;
  }
  
  .tag-name {
    display: table-cell;
    font-weight: bold;
    width: 100px;
    vertical-align: top;
    padding: 5px 0;
    color: #4a5568;
  }
  
  .problems {
    display: table-cell;
    padding: 5px 0;
  }
  
  .problem {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: white;
    border-radius: 6px;
    transition: all 0.2s ease;
  }
  
  .problem:hover {
    background-color: #f8f9fa;
    transform: translateX(4px);
  }
  
  .problem-id {
    margin-right: 10px;
    font-weight: bold;
    color: #4a5568;
  }
  
  .problem-title {
    flex-grow: 1;
    margin-right: 15px;
  }
  
  .problem-difficulty {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
  }
  
  .简单 {
    background-color: #e6ffed;
    color: #1a7f37;
  }
  
  .中等 {
    background-color: #fff8c5;
    color: #9a6700;
  }
  
  .困难 {
    background-color: #ffdcd7;
    color: #cf222e;
  }
  
  ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  ul li {
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    background-color: white;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
  }
  
  ul li:hover {
    background-color: #f8f9fa;
    transform: translateX(4px);
  }
  </style>